*{
  margin:0;
  padding:0;
}
@media (min-width: 1400px){
  .container {
    width: 1462px;
  }
}
a:link,
a:visited {
  text-decoration: none;
  color: #fff;
}
li{list-style:none;}
a:hover,
a:active {
  color: #f60;
}
html,body{
  width:100%;
  height:100%;
  background:#f5f5f5;
}
.box{
  width:100%;
  height:100%;
}
.nav{
  width:100%;
  height:90px;
  position: fixed;
  top:0;
  bottom:0;
  z-index: 999;
  >div{
    overflow:hidden;
    .pic{
      height:90px;
      float:left;
      >img{
        width:197px;
        height:37px;
        margin-top:26.5px;
      }
    }

    >ul{
      float:right;
      height:90px;
      >li{
        text-align:center;
        float:left;
        font-size:21.6px;
        line-height:90px;
        margin-left:70px;
      }
    }
  }

}
#dowebok {
  .section {
    height:100%;
    overflow:hidden;
    position: relative;
    &:nth-of-type(1) {
      z-index: 1100;
    }
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .bg11{
      position: absolute;
      width:732px;
      height:482px;
      background: url(../../images/5/txt1.png)  50% 0 no-repeat;
      background-size:100% 100%;
      left:296px;
      bottom:-482px;
      opacity: 0;
      -webkit-transition: all 2s ease;
      -o-transition: all 2s ease;
      -moz-transition: all 2s ease;
      transition: all 2s ease;
      transition-delay: 0.6s;
    }
    .bg12{
      position: absolute;
      bottom:155px;
      width:717px;
      height:590px;
      background: url(../../images/5/wifi.png)  50% 0 no-repeat;
      background-size:100% 100%;
      right:-717px;
      opacity: 0;
      -webkit-transition: all 1s ease;
      -o-transition: all 1s ease;
      -moz-transition: all 1s ease;
      transition: all 1s ease;
      transition-delay: 0.3s;
    }
    .bg21{
      position: absolute;
      top: -682px;
      width:334px;
      height:682px;
      background: url(../../images/5/phone.png)  50% 0 no-repeat;
      background-size:100% 100%;
      left:336px;
      opacity: 0;
      -webkit-transition: all 1s ease;
      -o-transition: all 1s ease;
      -moz-transition: all 1s ease;
      transition: all 1s ease;
      transition-delay: 1.7s;
    }
    .bg22{
       position: absolute;
       top: 300px;
       width:809px;
       height:228px;
       background: url(../../images/5/txt2.png)  50% 0 no-repeat;
       background-size:100% 100%;
       left:918px;
       opacity: 0;
       -webkit-transition: all 0.7s ease;
       -o-transition: all  0.7s ease;
       -moz-transition: all  0.7s ease;
       transition: all  0.7s ease;
      transition-delay: 1.5s;
     }
    .bg23{
       position: absolute;
       width:778px;
       height:288px;
       background: url(../../images/5/gift.png)  50% 0 no-repeat;
       background-size:100% 100%;
       left:888px;
        bottom:-288px;
       opacity: 0;
       -webkit-transition: all 1s ease;
       -o-transition: all 1s ease;
       -moz-transition: all 1s ease;
       transition: all 1s ease;
      transition-delay: 0.5s;
     }
    .bg31{
        position: absolute;
        width:815px;
        height:226px;
        background: url(../../images/5/txt3.png)  50% 0 no-repeat;
        background-size:100% 100%;
        left:156px;
        top:-226px;
        opacity: 0;
        -webkit-transition: all 1.5s ease;
        -o-transition: all 1.5s ease;
        -moz-transition: all 1.5s ease;
        transition: all 1.5s ease;
        transition-delay: 1.7s;
      }
    .bg32{
      position: absolute;
      width:593px;
      height:283px;
      background: url(../../images/5/tower.png)  50% 0 no-repeat;
      background-size:100% 100%;
      left:146px;
      bottom:0;
      /*opacity: 0;
      -webkit-transition: all 1.5s ease;
      -o-transition: all 1.5s ease;
      -moz-transition: all 1.5s ease;
      transition: all 1.5s ease;*/
    }
    .bg33{
      position: absolute;
      width:321px;
      height:258px;
      background: url(../../images/5/yellow.png)  50% 0 no-repeat;
      background-size:100% 100%;
      left:48px;
      bottom:0;
      /*opacity: 0;
      -webkit-transition: all 1.5s ease;
      -o-transition: all 1.5s ease;
      -moz-transition: all 1.5s ease;
      transition: all 1.5s ease;*/
    }
    .bg34{
      position: absolute;
      width:261px;
      height:462px;
      background: url(../../images/5/left.png)  50% 0 no-repeat;
      background-size:100% 100%;
      left:1066px;
      bottom:-462px;
      opacity: 0;
      -webkit-transition: all 1.3s ease;
      -o-transition: all 1.3s ease;
      -moz-transition: all 1.3s ease;
      transition: all 1.3s ease;
      transition-delay: 0.6s;
    }
    .bg35{
       position: absolute;
       width:261px;
       height:462px;
       background: url(../../images/5/right.png)  50% 0 no-repeat;
       background-size:100% 100%;
       left:1487px;
       bottom:-462px;
       opacity: 0;
       -webkit-transition: all 1.3s ease;
       -o-transition: all 1.3s ease;
       -moz-transition: all 1.3s ease;
       transition: all 1.3s ease;
      transition-delay: 0.8s;
     }
    .bg36{
      position: absolute;
      width:339px;
      height:691px;
      background: url(../../images/5/center.png)  50% 0 no-repeat;
      background-size:100% 100%;
      left:1238px;
      bottom:-691px;
      opacity: 0;
      -webkit-transition: all 1.3s ease;
      -o-transition: all 1.3s ease;
      -moz-transition: all 1.3s ease;
      transition: all 1.3s ease;
      transition-delay: 0.2s;
    }
    .bg41{
      position: absolute;
      width:769px;
      height:237px;
      background: url(../../images/5/txt4.png)  50% 0 no-repeat;
      background-size:100% 100%;
      left:184px;
      top:364px;
      opacity: 0;
      -webkit-transform: scale(0.1, 0.1);
      transform: scale(0.1, 0.1);
      -webkit-transition: all 1s ease;
      -o-transition: all 1s ease;
      -moz-transition: all 1s ease;
      transition: all 1s ease;
      transition-delay: 1.2s;
    }
    .bg42{
      position: absolute;
      width:655px;
      height:638px;
      background: url(../../images/5/tree.png)  50% 0 no-repeat;
      background-size:100% 100%;
      left:1178px;
      bottom:-638px;
      opacity: 0;
      -webkit-transition: all 1.5s ease;
      -o-transition: all 1.5s ease;
      -moz-transition: all 1.5s ease;
      transition: all 1.5s ease;
      transition-delay: 0.3s;
    }
    .bg43{
      position: absolute;
      width:84px;
      height:84px;
      background: url(../../images/5/video.png)  50% 0 no-repeat;
      background-size:100% 100%;
      left:1238px;
      bottom:623px;
      opacity: 0;
      -webkit-transform: scale(0.5, 0.5);
      transform: scale(0.5, 0.5);
      -webkit-transition: all 0.7s ease;
      -o-transition: all 0.7s ease;
      -moz-transition: all 0.7s ease;
      transition: all 0.7s ease;
      transition-delay: 1.7s;
    }
    .bg44{
      position: absolute;
      width:63px;
      height:61px;
      background: url(../../images/5/car.png)  50% 0 no-repeat;
      background-size:100% 100%;
      right:70px;
      bottom:523px;
      opacity: 0;
      -webkit-transform: scale(0.5, 0.5);
      transform: scale(0.5, 0.5);
      -webkit-transition: all 0.7s ease;
      -o-transition: all 0.7s ease;
      -moz-transition: all 0.7s ease;
      transition: all 0.7s ease;
      transition-delay: 2s;
    }
  }
  .active{
    .bg11{
      opacity: 1;
      bottom:205px;
    }
    .bg12{
      opacity: 1;
      right:156px;
    }
    .bg21{
      top: 134px;
      opacity: 1;
    }
    .bg22{
      opacity: 1;
    }
    .bg23{
      bottom:0;
      opacity: 1;
    }
    .bg31{
      top:286px;
      opacity: 1;
    }
    .bg35{
      opacity: 1;
      bottom:244px;
    }
    .bg34{
      opacity: 1;
      bottom:244px;
    }
    .bg36{
      bottom:130px;
      opacity: 1;
    }
    .bg41{
      opacity: 1;
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
    }
    .bg42{
      opacity: 1;
      bottom:116px;
    }
    .bg43{
      opacity: 1;
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
    }
    .bg44{
      opacity: 1;
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
    }
  }
}



#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span {
  background: #fff;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border: none;
  background-color:rgba(255,255,255,0.3);
  border-radius: 50%;
  position: absolute;
  z-index: 1;
}
#fp-nav ul li,.fp-slidesNav ul li{
  margin-top:16px;
}






/*
.main{
  width:100%;
  >div{
    overflow:hidden;
    width:100%;
    background:#fff;
    &:nth-of-type(1){
      margin-top:90px;
      img{
        width:100%;
        height:auto;
      }
    }
    &:nth-of-type(2){
      margin-top:40px;
      img{
        width:100%;
        height:auto;
      }
    }
    &:nth-of-type(3){
      margin-top:40px;
      img{
        width:100%;
        height:auto;
      }
    }
  }
}*/
